<template>
	<div>
		<HeaderSearch />		
			<div class="swiper-size">
				<router-link to="/layout/tuijian">
					<swiper :options="swiperOption">
				    <swiper-slide>
				    	<img  :src="swiperData[0]" alt="">
				    </swiper-slide>
				    <swiper-slide>
				    	<img  :src="swiperData[1]" alt="">
				    </swiper-slide>
				    <swiper-slide>
				    	<img  :src="swiperData[2]" alt="">
				    </swiper-slide>
				    <swiper-slide>
				    	<img  :src="swiperData[3]" alt="">
				    </swiper-slide>
				    <swiper-slide>
				    	<img  :src="swiperData[4]" alt="">
				    </swiper-slide>
				    <swiper-slide>
				    	<img  :src="swiperData[5]" alt="">
				    </swiper-slide>
				    <div class="swiper-pagination"  slot="pagination"></div>
					</swiper>
				</router-link>	
			</div>
		<div class="nature_container">
			<div class="nature_top">
				<div class="inner">
					<div class="nature_title">
						<div class="title_logo"></div>
						<h3>自然景观</h3>
						<p class="more">更多>></p>
					</div>
				</div>
			</div>
			<div class="nature_down">
				<div class="inner">
					<swiper :options="swiperoption">
					    <swiper-slide>
							<img  :src="swiperShow[0]" alt="" >
							<img  :src="swiperShow[1]" alt="" >
					    </swiper-slide>
					    <swiper-slide>
					    	<img  :src="swiperShow[2]" alt="" >
					    	<img  :src="swiperShow[0]" alt="" >
					    </swiper-slide>			 
					</swiper>
				</div>
			</div>
		</div>
		<div class="nature_container">
			<div class="nature_top">
				<div class="inner">
					<div class="nature_title">
						<div class="title_logo"></div>
						<h3>人文景观</h3>
						<p class="more">更多>></p>
					</div>
				</div>
			</div>
			<div class="nature_down">
				<div class="inner">
					<swiper :options="swiperoption">
					    <swiper-slide>
							<img  :src="swiperShow[3]" alt="" >
							<img  :src="swiperShow[4]" alt="" >
					    </swiper-slide>
					    <swiper-slide>
					    	<img  :src="swiperShow[5]" alt="" >
					    	<img  :src="swiperShow[3]" alt="" >
					    </swiper-slide>			 
					</swiper>
				</div>
			</div>
		</div>
		<div class="nature_container" >
			<div class="nature_top">
				<div class="inner">
					<div class="nature_title">
						<div class="title_logo"></div>
						<h3>田园风光</h3>
						<p class="more">更多>></p>
					</div>
				</div>
			</div>
			<div class="nature_down">
				<div class="inner">
					<swiper :options="swiperoption">
					    <swiper-slide>
							<img  :src="swiperShow[6]" alt="" >
							<img  :src="swiperShow[7]" alt="" >
					    </swiper-slide>
					    <swiper-slide>
					    	<img  :src="swiperShow[8]" alt="" >
					    	<img  :src="swiperShow[6]" alt="" >
					    </swiper-slide>			 
					</swiper>
				</div>
			</div>
		</div>
		<div class="final"></div>
		<FooterNav />
	</div>
</template>

<script>
import HeaderSearch from "../components/headSearch"
import FooterNav from "../components/footerNav"

export default{
	name:"shouye",
	data(){
		return{
				swiperData:[
				require("../assets/landscape/shouye01.png"),
				require("../assets/landscape/banner02.png"),
				require("../assets/landscape/banner03.png"),
				require("../assets/landscape/banner04.png"),
				require("../assets/landscape/banner05.png"),
				require("../assets/landscape/banner06.png")
				],
				swiperOption: {
		          	pagination: {
					    el: '.swiper-pagination',
					},
					autoplay:true
		   		},
		   		swiperShow:[
				require("../assets/landscape/shouye02.png"),
				require("../assets/landscape/shouye03.png"),
				require("../assets/landscape/shouye04.png"),
				require("../assets/landscape/shouye05.png"),
				require("../assets/landscape/shouye06.png"),
				require("../assets/landscape/shouye08.png"),
				require("../assets/landscape/shouye08.png"),
				require("../assets/landscape/shouye09.png"),
				require("../assets/landscape/shouye10.png"),
				],
				swiperoption: {
					freeMode : true
		   		},
		   		titleData:[
		   			{name:"自然景观"},
		   			{name:"人文景观"},
		   			{name:"田园风光"}
		   		]
			}
	},
	components:{
		HeaderSearch,
		FooterNav
	}
}	
</script>
<style scoped lang="less">
	.swiper-size{
		width: 710 /50rem;
		height: 280 /50rem;
		margin: 114/50rem 20/50rem 20/50rem 20/50rem;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.final{
		width: 100%;
		height: 98/50rem;
	}
	.nature_container{
		width: 100%;
		height: 311 /50rem;
		.inner{
			width: 710 /50rem;
			margin: 0 auto;
		}
		.nature_top{
			background-color: #fff;
			width:100%;
			height:58 /50rem;
			margin: 2/50rem auto;
			margin-top: 20 /50rem;
			.title_logo{
				width: 16 /50rem;
				height: 38 /50rem;
				background-color: #7dd19d;
				float: left;
				margin-top: 10 /50rem;
			}
			h3{
				float: left;
				line-height: 58 /50rem;
				margin-left: 10 /50rem;
			}
			p{
				float: right;
				line-height:58 /50rem;
			}
		}
		.nature_down{
			width: 100%;
			height: 252 /50rem;
			background-color: #fff;
			margin:0 auto;
			margin-bottom: 20 /50rem;
			img{
				width: 350 /50rem;
				height: 230 /50rem;
				margin-top: 10 /50rem;
			}
		}
	}
</style>